<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../bower_components/summernote/dist/summernote-bs4.min.css">
    <link rel="stylesheet" href="../bower_components/select2/dist/css/select2.min.css">
    <link rel="stylesheet" href="../bower_components/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="../bower_components/vue-select/dist/vue-select.css">

    <script src="../bower_components/jquery/dist/jquery.min.js"></script>
    <script src="../bower_components/popper.js/dist/umd/popper.min.js"></script>
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../bower_components/polyfill/dist/polyfill.min.js"></script>
    <script src="../bower_components/summernote/dist/summernote-bs4.js"></script>
    <script src="../bower_components/summernote/dist/lang/summernote-zh-CN.min.js"></script>
    <script src="../bower_components/vue/dist/vue.js"></script>
    <script src="../bower_components/select2/dist/js/select2.min.js"></script>
    <script src="../bower_components/select2/dist/js/i18n/zh-CN.js"></script>
    <script src="../bower_components/vue-select/dist/vue-select.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/css/layui.css"></script>
    <script src="layui/layui.all.js"></script>
    <style type="text/css">
        div {
            padding: 0;
            margin: 0;
            border: none;
        }

        table {
            margin: 0;
            padding: 0;
        }

        .tables {
            margin: 0;
            padding: 0px;
            border: none;
        }
    </style>
</head>

<body>
<!--导航栏开始-->
<div class="container">
    ​
    <div>
        <h1 style="text-align: center; color: #00b3ee">学生管理系统</h1>
    </div>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">欢迎使用</a>
            </div>
            <div>
                <ul class="nav navbar-nav">

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            班级信息管理
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu ">
                            <li onclick="show(1,7)"><a href="#" class="dropdown-toggle">班级管理</a></li>
                            <li onclick="show(2,7)"><a href="#" class="dropdown-toggle">添加班级</a></li>

                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            课程信息管理
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li onclick="show(3,7)"><a href="#">课程管理</a></li>
                            <li onclick="show(4,7)"><a href="#">添加课程</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            学生相关
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li onclick="show(5,7)"><a href="#">添加学生</a></li>
                            <li onclick="show(6,7)"><a href="#">添加成绩</a></li>
                        </ul>
                    </li>
                    <li onclick="show(7,7)"><a href="#">查询相关</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!--导航栏结束-->

    <!--查询班级-->
    <div id="ii1" style="display:none">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
    <!-- 开班 -->
    <div class="container" id="ii2" style="display:none">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">班级名称: </label>
                <div class="layui-input-block">
                    <input type="text" name="classname" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea" name="classinfo"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-filter="demo1">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <!-- 查看课程 -->
    <div id="ii3" style="display:none">
        <table class="layui-hide" id="test1" lay-filter="test"></table>
    </div>
    <!-- 添加课程 -->
    <div id="ii4" style="display:none">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">课程名称: </label>
                <div class="layui-input-block">
                    <input type="text" name="cname" lay-verify="title" autocomplete="off" placeholder="请输入课程名称"
                           class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">上课教师: </label>
                    <div class="layui-input-block">
                        <input type="text" name="tname" lay-verify="title" autocomplete="off" placeholder="请输入教师姓名"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">上课地点: </label>
                    <div class="layui-input-block">
                        <input type="text" name="point" lay-verify="title" autocomplete="off" placeholder="请输入上课地点"
                               class="layui-input">
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入内容" class="layui-textarea" name="cinfo"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn" lay-filter="demo1">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div id="ii5" style="display:none">
        <!--添加学生-->
        ​
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">学号:</label>
                <div class="layui-input-block">
                    <input type="text" name="stuno" lay-verify="title" autocomplete="off" placeholder="请输入学生学号"
                           class="layui-input"><span style="display: none;">学号已存在</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名:</label>
                <div class="layui-input-block">
                    <input type="text" name="snane" lay-verify="title" autocomplete="off" placeholder="请输入学生姓名"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码:</label>
                <div class="layui-input-block">
                    <input type="password" name="password" lay-verify="title" autocomplete="off"
                           placeholder="请输入密码 " value="123456" class="layui-input"><span
                        style="color: green;">默认密码:123456</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">生日:</label>
                <div class="layui-input-block">
                    <input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别:</label>
                <div class="layui-input-block">
                    <input type="radio" name="gender" value="男" title="男" checked="">
                    <input type="radio" name="gender" value="女" title="女">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">班级:</label>
                <div class="layui-input-block">
                    <select name="interest" lay-filter="aihao">
                        <option value=""></option>
                        <option value="0">写作</option>
                        <option value="1" selected="">阅读</option>
                        <option value="2">游戏</option>
                        <option value="3">音乐</option>
                        <option value="4">旅行</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注:</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div>
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" type="submit">立即提交
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <div id="ii6" style="display:none">
        <form>
            <div class="layui-form-item">
                <label class="layui-form-label">学号:</label>
                <div class="layui-input-block">
                    <input type="text" name="snane" lay-verify="title" autocomplete="off" placeholder="请输入学生学号"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">语文:</label>
                <div class="layui-input-block">
                    <input type="text" name="yscore" lay-verify="title" autocomplete="off" placeholder="请输入语文成绩"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">数学:</label>
                <div class="layui-input-block">
                    <input type="text" name="sscore" lay-verify="title" autocomplete="off" placeholder="请输入数学成绩"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">英语:</label>
                <div class="layui-input-block">
                    <input type="text" name="escore" lay-verify="title" autocomplete="off" placeholder="请输入英语成绩"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选修:</label>
                <div class="layui-input-block">
                    <input type="text" name="xscore" lay-verify="title" autocomplete="off" placeholder="请输入选修成绩"
                           class="layui-input">
                </div>
            </div>
            <div>
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" type="submit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <div id="ii7" style="display:none">
        <div id="createQuestionApp">
            <form v-on:submit.prevent="createQuestion">
                <div class="form-group">
                    <label>请选择班级:</label>
                    <v-select :options="tags" v-model="selectedTagIds" :selectable="() => selectedTagIds.length < 2"
                              :reduce="option => option.value" multiple required placeholder="请选择问题分类的标签(最多可以3个选)">
                    </v-select>
                    <label>学号:</label>
                    <input type="text" name="stuno">
                    <label>请输入学生姓名:</label>
                    <input type="text" name="sname">
                    <label>请选择课程:</label>
                    <v-select :options="teachers" v-model="selectedTeacherIds" :selectable="() => selectedTeacherIds.length < 2"
                              :reduce="option => option.value" multiple required placeholder="请选择问题分类的标签(最多可以3个选)">
                    </v-select>
                    <button type="submit" class="btn btn-primary mt-3">提交问题</button>
                </div>
            </form>
        </div>
        <div class="layui-container">
            <table class="layui-hide" id="test2" lay-filter="test"></table>
        </div>
    </div>
</div>


<script>
    $(document).ready(function () {
        $('#summernote').summernote({
            height: 300,
            tabsize: 2,
            lang: 'zh-CN',
            placeholder: '请输入问题的详细描述...'
        });
        $('select').select2({placeholder: '请选择...'});
    });
</script>
<script src="/js/commons/nav_tags.js"></script>
<script src="/js/question/create.js"></script>
<!-- 导航栏区域切换 -->
<script>
    function show(a) {
        for (var i = 1; i <= 7; i++) {
            document.getElementById("ii" + i).style.display = 'none';
        }
        document.getElementById("ii" + a).style.display = 'block';
    }
</script>
<script>
    //日期
    laydate.render({
        elem: '#date'
    });
    laydate.render({
        elem: '#date1'
    });
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;
    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 班级表 -->
<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#test'
            , height: 812
            , url: 'user.json' //数据接口
            , page: true //开启分页
            , toolbar: '#toolBar'
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 180, fixed: 'left', unresize: true, sort: true}
                , {field: 'sex', title: '班级名称', width: 320, edit: 'text', sort: true}
                , {field: 'city', title: '备注', width: 420}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
            , page: true
        });

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.prompt({
                    formType: 2
                    , value: data.email
                }, function (value, index) {
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });
    });
    layui.use('form', function () {
        var form = layui.form;
        form.render();
    });
</script>
<!-- 课程表 -->
<script type="text/html" id="barDemo1">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#test1'
            , height: 812
            , url: 'user.json' //数据接口
            , page: true //开启分页
            , toolbar: '#toolBar'
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}
                , {field: 'sex', title: '课程名称', width: 220, edit: 'text', sort: true}
                , {field: 'sex', title: '上课教师', width: 150, edit: 'text', sort: true}
                , {field: 'sex', title: '教室', width: 220, edit: 'text', sort: true}
                , {field: 'city', title: '备注', width: 270}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo1', width: 150}
            ]]
            , page: true
        });

        //监听行工具事件
        table.on('tool(test1)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.prompt({
                    formType: 2
                    , value: data.email
                }, function (value, index) {
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });
    });
    layui.use('form', function () {
        var form = layui.form;
        form.render();
    });
</script>
<!-- 详情查询 -->
<script type="text/html" id="barDemo2">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#test2'
            , height: 812
            , url: 'user.json' //数据接口
            , page: true //开启分页
            , toolbar: '#toolBar'
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 180, fixed: 'left', unresize: true, sort: true}
                , {field: 'sex', title: '班级名称', width: 320, edit: 'text', sort: true}
                , {field: 'city', title: '备注', width: 420}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo2', width: 150}
            ]]
            , page: true
        });

        //头工具栏事件
        table.on('toolbar(test2)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(test2)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.prompt({
                    formType: 2
                    , value: data.email
                }, function (value, index) {
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });
    });
    layui.use('form', function () {
        var form = layui.form;
        form.render();
    });
</script>
</body>

</html>